<template>
  <div class="product-card" @click="handleClick(product)">
    <div class="image-placeholder">
      <!-- 显示商品图片，如果没有则显示占位符文本 -->
      <img v-if="product.imageUrl" :src="product.imageUrl" :alt="product.title" class="product-image" />
      <span v-else class="placeholder-text">商品图片</span>
      <span v-if="product.isFreeShipping" class="shipping-tag">包邮</span>
    </div>
    <div class="info">
      <p class="title">{{ product.title }}</p>
      <p class="price">
        <span class="price-currency">{{ product.currencyPrice }}租币</span>
        <span class="price-cash">+{{ product.cashPrice }}元</span>
      </p>
      <p class="meta">
        <span class="original-price">{{ product.originalPrice }}元</span>
        <span class="sales">已兑{{ product.sales }}件</span>
      </p>
    </div>
  </div>
</template>

<script setup lang="ts">
// 使用 TypeScript 定义 props 类型
import type { Product } from '../data';

// 使用 defineProps 接收父组件传来的数据
defineProps<{
  product: Product;
}>();

// 定义点击事件处理函数
const handleClick = (product: Product) => {
  // 触发点击事件，将商品数据作为参数传递
  console.log('点击了商品:', product);
};
</script>

<style scoped lang="scss">
.product-card {
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
  padding-bottom: 3px;
  .image-placeholder {
    position: relative;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;

    .product-image {
      width: 100%;
      height: 100%;
    }

    .placeholder-text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      color: #999;
      font-size: 14px;
    }

    .shipping-tag {
      position: absolute;
      top: 8px;
      right: 8px;
      background: linear-gradient(138deg, #FF9A3C 0%, #FF611C 100%);
      color: white;
      font-size: 10px;
      padding: 2px 6px;
      border-radius: 2px;
      z-index: 1; // 确保标签在图片上方
    }
  }

  .info {
    padding:8px;
    font-size: 12px;

    .title {
      font-size: 14px;
      color: #333;
      font-weight: 500;
      // 文字不换行，超出部分显示省略号
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .price {
      margin: 8px 0;

      .price-currency {
        color: #ff6a00;
        font-weight: 400;
        font-size: 14px;
      }

      .price-cash {
        color: #ff6a00;
      }
    }

    .meta {
      color: #999;
      display: flex;

      //   justify-content: space-between;
      .original-price {
        text-decoration: line-through;
        margin-right: 6px;
      }
    }
  }
}
</style>